<template>
  <div class="wh-full flex">
    <!-- 侧边栏 -->
    <sidebar />
    <div class="container">
      <div class="header px-10">
        <div class="rightBar">
          <WinControl></WinControl>
        </div>
      </div>
      <keep-alive include="Hook">
        <component v-if="Component[outside]" :is="Component[outside]" />
      </keep-alive>
      
    </div>
  </div>
</template>

<script>
import { shallowRef } from 'vue';
import { useStore, mapState } from 'vuex';
import sidebar from "./sidebar.vue";
import WinControl from "@/components/WinControl/index.vue";
import AddressBook from "./components/AddressBook/index.vue";
import MultiSend from "./components/MultiSend/index.vue";
import Hook from "./components/Hook/index.vue";
import Reply from "./components/Reply/index.vue";

export default {
  data() {
    return {
      Component: {
        notebook: shallowRef(AddressBook),
        multiSend: shallowRef(MultiSend),
        hook: shallowRef(Hook),
        reply: shallowRef(Reply),
      }
    };
  },
  components: {
    WinControl,
    sidebar,
  },
  computed: {
    ...mapState({
      outside: (state) => state.sidebar.outside,
      outsideList: (state) => state.sidebar.outsideList,
    }),
  },
  mounted() {
  },
  methods: {

  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
}

.header {
  -webkit-app-region: drag;
  position: relative;
  height: 36px;
  width: calc(100vw - 68px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border-default);
}

.rightBar {
  -webkit-app-region: no-drag;
  position: absolute;
  right: 0px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
